/*
 * @Author: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @Date: 2022-08-15 10:47:55
 * @LastEditors: zhouyanxin123 10857086+zhouyanxin123@user.noreply.gitee.com
 * @LastEditTime: 2022-08-16 16:46:17
 * @FilePath: \ceshi\src\cangku.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from "react";
import {
  Button,
  Cascader,
  Input,
  Table,
  Pagination,
  ConfigProvider,
  Space,
  Col,
  Row,
  Modal,
} from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import "./ckliebiao.css";

export default function Ckliebiao() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: "仓库名称",
      dataIndex: "warehouse_name",
      key: "warehouse_name",
      className: "bgColor",
    },
    {
      title: "负责人",
      dataIndex: "head",
      key: "head",
      className: "bgColor",
    },
    {
      title: "电话",
      dataIndex: "phone",
      key: "phone",
      className: "bgColor",
    },
    {
      title: "备注",
      dataIndex: "note",
      key: "note",
      className: "bgColor",
    },

    {
      title: "管理",
      key: "action",
      className: "bgColor",
      render: () => (
        <Space size="middle">
          <button onClick={showModal}>修改</button>
          <button>删除</button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: 1,
      warehouse_name: "1",
      head: "1",
      phone: "1",
      note: "1",
    },
  ];
  return (
    <div>
      <div className="ckbutton">
        <Button type="primary" className="sysp">
          仓库列表
        </Button>
        <Button type="primary" className="xzsp" onClick={showModal}>
          新增仓库
        </Button>
      </div>
      <Table columns={columns} dataSource={data} pagination={false} />
      <ConfigProvider locale={zhCN}>
        <Pagination
          className="GetPages"
          total={20}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总共 ${total} 页`}
        />
      </ConfigProvider>
      <Modal
        title="新增仓库"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div id="ckmod">
          <ul>
            <li style={{ display: "flex" }}>
              <span>仓库名称</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>负责人</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>电话</span>
              <span>
                <input type="text" />
              </span>
            </li>{" "}
            <li style={{ display: "flex" }}>
              <span>备注</span>
              <span>
                {/* <input type="textarea" /> */}
                <textarea></textarea>
              </span>
            </li>{" "}
          </ul>
        </div>
      </Modal>
    </div>
  );
}
